<template>
  <ContentWrap class="search-form">
    <el-form
      ref="queryFormRef"
      :inline="true"
      :model="queryParams"
      clas="-mb-15px"
      label-width="68px"
    >
      <el-form-item label="老人名称" prop="name">
        <el-input
          v-model="queryParams.name"
          class="!w-240px"
          clearable
          placeholder="请输入姓名"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-select v-model="queryParams.sex" placeholder="请选择姓别">
          <el-option
            v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_SEX)"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">
          <Icon class="mr-5px" icon="ep:search" />
          搜索
        </el-button>
        <el-button @click="resetQuery">
          <Icon class="mr-5px" icon="ep:refresh" />
          重置
        </el-button>
        <el-button @click="openForm('create')" v-hasPermi="['elder:info:create']">
          <Icon icon="ep:plus" /> 新增
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <Table
    :columns="columns"
    @page-change="getList"
    :page-param="queryParams"
    :page-data="elderData"
    :adaptive="true"
    save-key="ElderInfo"
    height-per="90"
    @row-dblclick="handleTableDblclick"
  >
    <template #menu="{ row }">
      <context-menu-item
        label="修改"
        @click="openForm('update', row.id)"
        v-hasPermi="['elder:info:update']"
      />
    </template>
  </Table>

  <ElderInfoEdit ref="editFormRef" @success="getList" />
</template>
<script lang="ts" name="ElderInfo" setup>
import { DICT_TYPE, getIntDictOptions, getDictObj } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as ElderApi from '@/api/elder/elderInfo'
import ElderInfoEdit from './ElderInfoEdit.vue'
const queryFormRef = ref() // 搜索的表单
const loading = ref(true) // 列表的加载中'
const editFormRef = ref()
const queryParams = reactive({
  name: undefined,
  sex: undefined
})
const columns: TableColumnList = [
  {
    label: '老人编号',
    prop: 'elderNo',
    minWidth: '100'
  },
  {
    label: '姓名',
    prop: 'name'
  },
  {
    label: '性别',
    prop: 'sex',
    formatter: ({ sex }) => getDictObj(DICT_TYPE.COMMON_SEX, sex).label
  },
  {
    label: '电话',
    prop: 'mobile'
  },
  {
    label: '身份证号',
    prop: 'identityCard'
  },
  {
    label: '出生日期',
    prop: 'birthday',
    formatter: ({ birthday }) => formatDate(birthday, 'YYYY-MM-DD')
  },
  {
    label: '年龄',
    prop: 'age',
    formatter: ({ birthday }) => calcAge(birthday)
  },
  {
    label: '生日类型',
    prop: 'birthdayType',
    formatter: ({ birthdayType }) => getDictObj(DICT_TYPE.CALENDAR_TYPE, birthdayType).label
  },
  {
    label: '婚姻状况',
    prop: 'maritalStatus',
    formatter: ({ maritalStatus }) => getDictObj(DICT_TYPE.MARITAL_STATUS, maritalStatus).label
  },
  {
    label: '政治面貌',
    prop: 'politicalOutlook'
  },
  {
    label: '家庭住址',
    prop: 'address'
  },
  {
    label: '户籍地址',
    prop: 'domicileAddress'
  },
  {
    label: '老人类别',
    prop: 'type',
    formatter: ({ type }) => getDictObj(DICT_TYPE.ELDER_TYPE, type).label
  },
  {
    label: '居住情况',
    prop: 'liveType',
    formatter: ({ liveType }) => getDictObj(DICT_TYPE.ELDER_LIVE_TYPE, liveType).label
  },
  {
    label: '助老卡号',
    prop: 'careCard'
  },
  {
    label: '社保卡号',
    prop: 'socialSecurityNumber'
  },
  {
    label: '登记入住日期',
    prop: 'checkinDate',
    formatter: ({ checkinDate }) => formatDate(checkinDate, 'YYYY-MM-DD')
  }
]
onMounted(() => {
  getList()
})
/** 查询角色列表 */
const elderData = ref()
const getList = async () => {
  loading.value = true
  try {
    elderData.value = await ElderApi.query(queryParams)
  } finally {
    loading.value = false
  }
}
/** 搜索按钮操作 */
const handleQuery = () => {
  getList()
}
/** 重置按钮操作 */

const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

const calcAge = (birthday) => {
  if (!birthday) return ''
  let birthdayYear = parseInt(formatDate(birthday, 'YYYY'))
  let currentYear = parseInt(formatDate(new Date(), 'YYYY'))
  let age = currentYear - birthdayYear
  return age.toString()
}

const openForm = (type: string, id?: number) => {
  editFormRef.value.open(type, id)
}

/** 处理tables双击修改事件 */
const handleTableDblclick = (row) => {
  editFormRef.value.open('update', row.id)
}
</script>
